<template>
  <l-content :app="app">
    <el-form :inline="true" :model="searchForm" size="mini"
             onkeydown="if(event.keyCode==13){return false;}" @keyup.native.enter="onSearch">
      <el-form-item class="pull-right">
        <el-input
          placeholder="角色名/角色编码/描述"
          v-model="searchForm.param">
          <div slot="suffix" class="el-input__icon" >
            <el-button size="mini" type="text" @click="onSearch">
              <i class="el-icon-search"></i>
            </el-button>
          </div>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="plus" @click="onAdd">新增</el-button>
      </el-form-item>
      <el-form-item>
        <c-pop-button type="danger" pMsg="确认要批量删除吗？" :disabled="!canDeleteBatch" @click="onDeleteBatch"><i
          class="el-icon-delete"></i>&nbsp;批量删除
        </c-pop-button>
      </el-form-item>
    </el-form>
    <!--
      table 根据这个来获取子组件的方法
      tableData 表格数据
      handleSelectionChange 监听选择
      handleCurrentChange 监听翻页事件
      loading 表格加载,！注意，loading的用法和原生的有区别
    -->
    <c-page-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      @size-change="handleSizeChange"
      @sort-change="handleSortChange"
      @current-change="handleCurrentChange"
      :loading="loading">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名"
        sortable='custom'
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="roleCode"
        label="角色编码"
        sortable='custom'
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="角色描述"
        sortable='custom'
        min-width="150">
      </el-table-column>
      <el-table-column label="操作" min-width="150">
        <template slot-scope="scope">

          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="default"
            @click="handleDetail(scope.row)">详情
          </el-button>
          <!-- 必须使用箭头函数把btn的值传下去才能控制开关的加载状态 -->
          <c-pop-button
            size="mini"
            type="danger"
            pMsg="确认要删除吗？"
            @click="btn => handleDelete(btn, scope.row)"
          >删除
          </c-pop-button>

        </template>
      </el-table-column>
    </c-page-table>

    <!-- dialog -->
    <!--<s-dialog-add ref="addDialog" @ok="handleCurrentChange(tableData.page)"></s-dialog-add>-->
    <!--<s-dialog-edit ref="editDialog" @ok="handleCurrentChange(tableData.page)"></s-dialog-edit>-->
    <!-- dialog end -->
    <component :is="dialog" :data="dialogData" @ok="handleCurrentChange(tableData.page)"
               @close="dialog = ''"/>

  </l-content>
</template>

<script>
import SDialogAdd from './comps/RoleManager/SDialogAdd'
import SDialogEdit from './comps/RoleManager/SDialogEdit'
import SDialogDetail from './comps/RoleManager/SDialogDetail'
// 用于查询的参数
const paramForm = {}
export default {
  name: 'UserManager',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogAdd,
    SDialogEdit,
    SDialogDetail
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      searchForm: {
        param: ''
      },
      dialog: '',
      dialogData: {
        detail: {},
        resourceTree: []
      },
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.handleCurrentChange(1)
    this.$service.system.queryResourceTree().then(res => {
      this.dialogData.resourceTree = res.data
    })
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  watch: {
    // 通过监听选择项来判断批量删除按钮是否可用
    multipleSelection (val) {
      this.canDeleteBatch = val.length > 0
    }
  },
  methods: {
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(paramForm, this.searchForm)
      this.handleCurrentChange(1)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      paramForm.sidx = sidx
      paramForm.sord = sord
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.loading = true
      return new Promise((resolve, reject) => {
        // this.pageSize 获取当前每页显示数量,
        this.$service.system.queryRolePage(currentPage, this.pageSize, paramForm).then(res => {
          this.tableData = res.data
          resolve()
        }).catch(reject).finally(() => {
          this.loading = false
        })
      })
    },
    handleEdit (row) {
      this.dialogData.detail = row
      this.dialog = 'SDialogEdit'
    },
    handleDetail (row) {
      this.dialogData.detail = row
      this.dialog = 'SDialogDetail'
    },
    handleDelete (btn, row) {
      this.$service.system.deleteRole(row.id).then(() => {
        this.handleCurrentChange(this.tableData.page)
      }).finally(() => {
        btn.isLoading(false)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onAdd () {
      this.dialog = 'SDialogAdd'
    },
    onDeleteBatch (btn) {
      if (this.multipleSelection.length > 0) {
        const ids = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id)
        }
        this.$service.system.batchDeleteRole(ids).then(() => {
          this.handleCurrentChange(this.tableData.page)
        }).finally(() => {
          btn.isLoading(false)
        })
      } else {
        this.$message({
          message: '没有选中项',
          type: 'warning'
        })
        btn.isLoading(false)
      }
    }
  }
}
</script>

<style>

</style>
